<!-- 人事管理页 -->
<template>
  <el-card style="margin: 20px;height:100%;">
    <el-form :inline="true">
      <el-form-item label="会议室名称" style="width: 270px;">
        <el-input placeholder="请输入会议室名称"
                  v-model="searchUserForm.meetingRoom" @keydown.enter="loadUser"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadUser">搜索</el-button>
      </el-form-item>
      <hr>
      <el-button type="primary" style="float:left;margin-top:10px;"
                 @click="beforeAddUser">➕ 新增会议室
      </el-button>
    </el-form>
    <el-table :data="userArr">
      <el-table-column label="会议室名称" prop="meetingRoom" width="100" align="center"></el-table-column>
      <el-table-column label="容纳人数" prop="meetingNumber" align="center"></el-table-column>
      <el-table-column label="会议室地址" prop="meetingSite" align="center"></el-table-column>
      <el-table-column label="管理员" prop="admin" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" link :disabled="scope.row.level==40">编辑</el-button>
          <el-button type="primary" link @click="deleteGeo(scope.row.meetingRoom)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    -->
    <el-dialog
        :title="dialogTitle"
        style="width: 1000px;padding:40px;" v-model="dialogVisible" :before-close="handleClose">
      <el-form label-width="80px" label-position="top">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="会议室名">
              <el-input placeholder="请输入"
                        v-model="saveUserForm.meetingRoom"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="容纳人数">
              <el-input placeholder="请输入" v-model="saveUserForm.meetingNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="会议室地址">
              <el-input placeholder="请输入" v-model="saveUserForm.meetingSite"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管理员">
              <el-select placeholder="请输选择" v-model="saveUserForm.admin">
                <el-option border label="孙雪" value="1"></el-option>
                <el-option border label="张静" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="saveUser">保存</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

const dialogVisible = ref(false);
const handleClose = () => {
  if (confirm('您是否要关闭本弹窗?')) {
    saveUserForm.value = {};
    dialogVisible.value = false;
  }
}
const saveUserForm = ref(
    {
      admin: '',
      meetingRoom: '',
      meetingNumber: '',
      meetingSite: ''
    });

//定义重置搜索的方法
const resetSearch = () => {
  searchUserForm.value = {};
  loadUser();
}
//定义查询会议室方法--------------------------------------------------------




const searchUserForm = ref({meetingRoom: ''});
const loadUser = () => {
let data = qs.stringify(searchUserForm.value);
// console.log(searchUserForm.value);
 axios.get(BASE_URL+'/v1/meeting/load?'+data).then((response)=>{
   if (response.data.code==2000){
     userArr.value=response.data.data;
     console.log(userArr.value);
     ElMessage.success("查询成功！")
   }else {
     ElMessage.error("查询失败！");
   }
 });
};

onMounted(()=>{
  loadUser();
})


const userArr = ref([]);
const beforeAddUser = () => {
  dialogTitle.value = '新增会议室';
  dialogVisible.value = true;
};
//保存会议室的方法-------------------------------------------------
const saveUser=()=>{
 axios.post(BASE_URL+'/v1/meeting/save',saveUserForm.value).then((response)=>{
   console.log(saveUserForm.value);
   if (response.data.code==2000){
     ElMessage.success("保存成功！")
     saveUserForm.value={};
     dialogVisible.value = false;
   }else{
     ElMessage.error("保存失败！");
      saveUserForm.value={};

   }
 });
}




const dialogTitle = ref('增加会议室');





// 这是删除
const deleteGeo = (meetingRoom) => {
  if (confirm('您确认要删除此会议室吗?')) {
    axios.post(BASE_URL + '/v1/meeting/delete/' + meetingRoom).then((response) => {
      if (response.data.code == 2000) {
        ElMessage.success('删除成功!');
        loadUser();
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  }
};
</script>

<style>

</style>